
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';


//静态路由配置
void main() => runApp(const MyApp3());

//定义根目录Widget
class MyApp3 extends StatelessWidget {
  const MyApp3({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        //初始化默认的 Material 组件本地化
        GlobalMaterialLocalizations.delegate,
        //初始化默认的 通用 Widget 组件本地化
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      //当前区域，如果为null则使用系统区域一般用于语言切换
      //传入两个参数，语言代码，国家代码
      //这里配制为中国
      locale: const Locale('zh', 'CN'),
      //定义当前应用程序所支持的语言环境
      supportedLocales: const [
        Locale('en', 'US'), // English 英文
        Locale('zh', 'CN'), // 中文
      ],
      routes: {
        //默认页面
        "/": (BuildContext context) => const Exam210HomePage(),
      },
    );
  }
}

///代码清单2-15 Scaffold中 BottomNavigation 底部导航栏
///代码路径 lib/code2/code210_Scaffold_BottomNavigation.dart
class Exam210HomePage extends StatefulWidget {
  const Exam210HomePage({Key? key}) : super(key: key);
  @override
  State<Exam210HomePage> createState() => _Exam210HomePageState();
}

class _Exam210HomePageState extends State<Exam210HomePage> {
  @override
  Widget build(BuildContext context) {
    //Scaffold 用来搭建页面的主体结构
    return Scaffold(
      //页面的头部
      appBar: AppBar(title: const Text("标题")),
      //页面的主内容区
      //可以是单独的StatefulWidget 也可以是当前页面构建的如Text文本组件
      //可以结合 TabBarView PageView 来实现标签面的切换
      body: const Center(child: Text("body内容区域")),
      bottomNavigationBar: buildBottomNavigation(),
    );
  }

  ///选中的当前的标签的索引
  int _tabIndex = 0;
  //构建底部导航栏
  BottomNavigationBar buildBottomNavigation() {
    //创建一个 BottomNavigationBar
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        //icon 用来配置显示的图标，读者可以在这里使用Image图片替换
        BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
        BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
        BottomNavigationBarItem(icon: Icon(Icons.people), label: "我的"),
      ],
      type: BottomNavigationBarType.fixed,//显示效果
      currentIndex: _tabIndex,//当前选中的页面
      backgroundColor: Colors.white, //导航栏的背景颜色
//      fixedColor: Colors.deepPurple,//选中时图标与文字的颜色
      selectedItemColor: Colors.blue,//选中时图标与文字的颜色
      unselectedItemColor: Colors.grey, //未选中时图标与文字的颜色
      iconSize: 24.0,//图标的大小
      //点击事件
      onTap: (index) {
        setState(() {
          _tabIndex = index;
        });
      },
    );
  }
}
